<template>
  <div id="taglistBox">
    <div id="userInfo">当前用户:
      <span id="name" v-text="userName"></span>
      <button @click="logout" id="logout">退出</button>
    </div>
    <div id="searchBox">
      <input type="text" placeholder="搜索标签,‘空格’查看所有" v-model="tag" v-text="onchang">
      <span class="icon icon-sousuo"></span>
    </div>
    <Category :open="open" :title="getTitle(index)" :obj="item" :type="index" v-for="(item,index) in obj" :key="index"></Category>
      <!-- <ul v-show="showTagList">
        <li v-for="(item,index) in taglist" :key="item.id" @click="choose(index,item)" v-bind:class="{active:index == current}"><a href="#">{{item}}</a></li>
      </ul> -->
  </div>
</template>
<script>
import Category from './component/Category'
import {typeList} from './util/util.js'

export default {
  components:{
    Category
  },
  data(){
    return {
      taglist:[],
      isActive:false,
      current:-1,
      tag:'',
      userName:sessionStorage.getItem('name'),
      typeList:typeList,
      showTagList:false,
      obj:{},
      open:false
    }
  },
  created:function(){
    // this.$http.get("http://"+this.IP+"/api/getTagList.php?m=gettags")
    //   .then((res)=>{
    //     this.sortTags(res.data)
    //   })
  },
  methods:{
    getTitle(index){
      return this.typeList[index]
    },
    // choose:function(index,item){
    //   this.current = index;

    //   this.$http.get('http://'+this.IP+'/api/getMsg.php?tag='+item)
    //     .then((res)=>{
    //       // this.$emit('content',res.data);
    //       this.$store.state.contentList = res.data;//vuex
    //     })
    // },
    logout:function(){
      sessionStorage.removeItem('loginkey');
      sessionStorage.removeItem('name');
      this.$router.push('./login');
    },
    sortTags(data){
      var obj = {}
        for(var item in data){
          if(!obj[data[item].type]){
            obj[data[item].type] = []
          }
          obj[data[item].type].push(data[item])
        }
        this.obj = obj
    }
  },
  computed:{
    onchang:function(){
      if(this.tag == ' '){
        this.open = true
      }else if(this.tag == ''){
        this.open = false
      }else{
        this.open = true
      }

      this.$http.get("http://"+this.IP+"/api/getTagList.php?m=gettags&tag="+this.tag)
      .then((res)=>{
        this.sortTags(res.data)
      })
    }
  }
}
</script>
<style scoped>
  #taglistBox{
    width: 20%;
    float: left;
    /* background-color: blueviolet */
  }
  li{
    text-align: center;
    height: 40px;
    border: 1px solid #aaa;
    line-height: 40px;
    font-size: 20px;
    cursor: pointer;
  }
  li:hover{
    background-color: #aaa;
  }
  a{
    text-decoration: none;
    color:darkolivegreen
  }
  li:hover a{
    color:aliceblue
  }
  .active{
    background-color: #aaa;
  }
  .active a{
    color:aliceblue
  }
  #searchBox{
    position: relative;
    height: 30px;
    line-height: 30px;
    margin-bottom: 20px
  }
  input{
    height: 30px;
    width: 200px
  }
  span{
    position: absolute;
    left: 180px;
  }
  #userInfo{
    font-size: 12px;
    text-align: right;
    margin-right: 25%;
    margin-bottom: 1%
  }
  #name{
    right: 8%;
    color:brown
  }
  #logout{
    position: absolute;
    right: 4%;
  }
</style>